import React, { useState, useEffect } from 'react';
import { Bar,Pie,DualAxes  } from '@ant-design/charts';
import * as echarts from 'echarts';
import {userCoutnList} from '@/services/user-list/userListApi'
import {userCoutnDay} from '@/services/user-list/userListApi'
import EcharsOne from './EcharsTable/echarOne'
//import EcharsUserAdd from './EcharsTable/echarDate'
const DemoBar: React.FC = () => {

  var data = [
    {
      year: '2017 年',
      value: 38,
    },
    {
      year: '2018 年',
      value: 52,
    },
    {
      year: '2019 年',
      value: 61,
    },
    {
      year: '2020 年',
      value: 145,
    },
    {
      year: '2021 年',
      value: 548,
    },
    {
      year: '2022 年',
      value: 646,
    },
    {
      year: '2023 年',
      value: 728,
    },
    {
      year: '2024 年',
      value: 824,
    },
    {
      year: '2025 年',
      value: 927,
    },
    {
      year: '2026 年',
      value: 1002,
    },
  ];
 

  var data2 = [
    {
      type: '分类一',
      value: 5,
    },
    {
      type: '分类二',
      value: 10,
    },
    {
      type: '分类三',
      value: 15,
    },
    {
      type: '分类四',
      value: 20,
    },
    {
      type: '分类五',
      value: 25,
    },
    {
      type: '其他',
      value: 30,
    },
  ];

  

  var data3 = [
    {
      time: '2021-03',
      value: 350,
      count: 350,
    },
    {
      time: '2021-04',
      value: 900,
      count: 900,
    },
    {
      time: '2021-05',
      value: 300,
      count: 300,
    },
    {
      time: '2021-06',
      value: 450,
      count: 450,
    },
    {
      time: '2021-07',
      value: 4600,
      count: 4600,
    },
    {
      time: '2021-08',
      value: 2700,
      count: 2700,
    },
    {
      time: '2021-09',
      value: 1800,
      count: 1800,
    },
    {
      time: '2021-10',
      value: 3900,
      count: 3900,
    },
    {
      time: '2021-11',
      value: 1000,
      count: 1000,
    },
    {
      time: '2021-12',
      value: 3100,
      count: 3100,
    },
    {
      time: '2022-01',
      value: 2200,
      count: 2200,
    },
    {
      time: '2022-02',
      value: 1300,
      count: 1300,
    },
    {
      time: '2022-03',
      value: 4400,
      count: 4400,
    },
    {
      time: '2022-04',
      value: 1500,
      count: 1500,
    },
    {
      time: '2022-05',
      value: 3600,
      count: 3600,
    },
    {
      time: '2022-06',
      value: 5700,
      count: 5700,
    },
    {
      time: '2022-07',
      value: 2800,
      count: 2800,
    },
  ];

   

  const [datas,setData] = useState(data)
  const [configs,setConfig] = useState({})
  const [data2s,setData2] = useState(data2)
  const [config2s,setConfig2] = useState({})
  const [data3s,setData3] = useState([])
  const [config3s,setConfig3] = useState({})
  const [userCount,setUserCount] = useState([])

  useEffect(()=>{
    async function echarsList() {
      // await echars()
      await charsData()  
      await CharDataTwo()
      await getUserDayData()
    }
    echarsList()
  },[])

  const getUserDayData=async()=>{
    const userCountData = await userCoutnDay(40);
    console.log(userCountData)
    setData3(userCountData)
  }

  const charsData= async()=>{
    const userCountList = await userCoutnList();
    console.log(userCountList)
    
    var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;
  
      option = {
          title: {
              text: 'EZblu用户区域统计分析',
              subtext: '实时数据',
              left: 'center'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
              type: 'scroll',
              orient: 'vertical',
              right: 10,
              top: 20,
              bottom: 20,
              data: userCountList.zgNames,
      
              selected: userCountList.zgUsers
          },
          series: [
              {
                  name: '姓名',
                  type: 'pie',
                  radius: '55%',
                  center: ['40%', '50%'],
                  data: userCountList.zgUsers,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      
      option && myChart.setOption(option);





      
  }

  
  const CharDataTwo = ()=>{
      
  }


  var config = {
    data: datas,
    xField: 'value',
    yField: 'year',
    seriesField: 'year',
    legend: { position: 'top-left' },
  };
  

  var config2 = {
    appendPadding: 10,
    data: data2s,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
      type: 'inner',
      offset: '-30%',
      content: function content(_ref) {
        var percent = _ref.percent;
        return ''.concat((percent * 100).toFixed(0), '%');
      },
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [{ type: 'element-active' }],
  };

  var config3 = {
    data: [data3s, data3s],
    xField: 'time',
    yField: ['value', 'count'],
    geometryOptions: [
      { geometry: 'column' },
      {
        geometry: 'line',
        lineStyle: { lineWidth: 2 },
      },
    ],
  };

  return (
    <div style={{width:"100%",height:"100%"}}>
        
       <div style={{display:"flex",flexDirection:"row",justifyContent:'space-around'}}>
       <div id="main-two" style={{width:500,height:500,marginBottom:50}}>
        <EcharsOne></EcharsOne>
         </div> 
         <div id="main2" style={{width:600,height:500,marginBottom:50}}></div>
       </div>
      
      <div style={{display:"flex",flexDirection:"row",justifyContent:"space-between"}}>
      <Bar {...config} style={{width:500}} />
        <Pie {...config2} style={{width:500}} />
      </div>
      <h4>用户..天增长统计</h4>
      <div
        style={{width:"100%",height:300}}
        >
          <DualAxes {...config3} />
      </div>

  </div>
 
  )
};

export default DemoBar;